<template>
  <div>
    <el-card class = "box-card">
      <el-row :gutter = "20">
        <el-form ref = "form" label-width = "80px">
          <el-col :span = "5">
            <div class = "grid-content bg-purple">
              <el-form-item label = "目录名称">
                <el-input v-model = "queryParameter.directoryName" placeholder = "请根据目录名称搜索"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span = "5">
            <div class = "grid-content bg-purple">
              <el-form-item label = "状态">
                <el-select v-model = "queryParameter.state" placeholder = "请选择">
                  <el-option label = "已启用" value = "1"></el-option>
                  <el-option label = "已禁用" value = "0"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-form>
        <el-col :span = "4">
          <div class = "grid-content bg-purple">
            <el-button @click = "clearSearchResults">清除</el-button>
            <el-button type = "primary" @click="getDirectoryObj">搜索</el-button>
          </div>
        </el-col>
        <el-col :offset = "7" :span = "2">
          <div class = "grid-content bg-purple">
            <el-button icon = "el-icon-edit" type = "success" @click = "addDialogVisible=true">新增目录</el-button>
          </div>
        </el-col>
      </el-row>
      <template>
        <el-alert style = "margin: 10px 0" :title = "`数据一共 ${counts} 条`" type = "info" show-icon
                  :closable = "false"></el-alert>
      </template>
      <div>
        <template>
          <el-table :data="directoryList">
            <el-table-column align="center" type = "index" label = "序号" width = "100px"></el-table-column>
            <el-table-column align = "center" prop = "subjectName" label = "所属学科" width = ""></el-table-column>
            <el-table-column align = "center" prop = "directoryName" label = "目录名称" width = "140"></el-table-column>
            <el-table-column align = "center" prop = "username"  label = "创建者" width = "120"></el-table-column>
            <el-table-column align = "center" prop = "addDate" label = "创建时间" width = "160"></el-table-column>
            <el-table-column align = "center" prop = "totals" label = "面试数量" width = "100"></el-table-column>
            <el-table-column align = "center" prop = "state" label = "状态" width = "100">
              <template slot-scope="scope">
                {{scope.row.state===1 ? '已启用':'已禁用'}}
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = "" label = "操作" width = "350">
              <template slot-scope="scope">
                <el-button size="mini" type="info" @click="editState(scope.row)">{{scope.row.state===1?'禁用':'启用'}}</el-button>
                <el-button size="mini" :disabled="!!scope.row.state" type="warning">修改</el-button>
                <el-button size="mini" :disabled="!!scope.row.state"  type="danger" @click="delDirectory(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class = "block" style = "margin:20px;float: right">
        <el-pagination
          background
          @size-change = "handleSizeChange"
          @current-change = "handleCurrentChange"
          :current-page = "queryParameter.page"
          :page-sizes = "[5, 10, 20, 50]"
          :page-size = "queryParameter.pagesize"
          layout = "prev, pager, next,sizes,jumper"
          :total = "counts">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="新增目录"
      :visible.sync="addDialogVisible"
      width="30%">
      <directorys-add @onAddParameter="getAddParameter"></directorys-add>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addDirectory">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="修改目录"
      :visible.sync="editDialogVisible"
      width="30%">
      <el-form ref="form" label-width="80px" :model="editParameter" :rules="addFromRules">
        <el-form-item label="所属学科">
          <el-select placeholder="请选择" v-model="editParameter.subjectID">
            <el-option v-for="item in subjectSimpleList" :label="item.label" :value="item.value" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="editParameter.directoryName" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as Directory from '@/api/hmmm/directorys'
import dayjs from 'dayjs'
import DirectorysAdd from '@/module-hmmm/components/directorys-add'
import * as Subject from '@/api/hmmm/subjects'

export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      // 请求参数
      queryParameter: {
        directoryName: '',
        page: 1,
        pagesize: 10,
        state: null
      },
      directoryList: [], // 目录列表
      counts: null, // 目录列表counts
      addDialogVisible: false, // 添加对话框默认隐藏
      addParameter: {}, // 子组件添加参数
      editDialogVisible: false,
      subjectSimpleList: [], // 精简学科列表
      editParameter: {
        directoryName: '',
        subjectID: ''
      },
      addFromRules: {
        directoryName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  created () {
    this.getDirectoryObj()
  },
  // 获取地址栏数据
  computed: {
    subjects () {
      return this.$route.query || null
    }
  },

  // 侦听地址栏数据
  watch: {
    '$route.query' () {
      this.getDirectoryObj()
    }
  },
  methods: {
    // 获取简单列表
    async getSubjectSimpleList () {
      const { data: res } = await Subject.simple()
      this.subjectSimpleList = res
      console.log(res)
    },
    // 删除
    async delDirectory (row) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await Directory.remove(row)
        if (!res.success) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        await this.getDirectoryObj()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 切换状态
    async editState (row) {
      try {
        await Directory.changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (e) {
        this.$message.error('请求错误')
      }
    },
    // 添加
    async addDirectory () {
      try {
        console.log(this.addParameter)
        await Directory.add(this.addParameter)
        this.$message.success('添加成功')
        this.addDialogVisible = false
        await this.getDirectoryObj()
      } catch (err) {
        this.$message.error('添加失败')
      }
    },
    // 获取目录列表
    async getDirectoryObj () {
      try {
        const { data: res } = await Directory.list(this.queryParameter)
        res.items.forEach(item => {
          item.addDate = dayjs(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        })
        this.directoryList = res.items
        this.counts = res.counts
        console.log('目录列表', res)
      } catch (err) {
        console.log(err)
      }
    },
    // 接收子组件数据
    getAddParameter (Parameter) {
      this.addParameter = Parameter
    },
    // 清除搜索结果
    clearSearchResults () {
      this.queryParameter.directoryName = ''
      this.getDirectoryObj()
    },
    // 分页
    handleSizeChange (pagesize) {
      this.queryParameter.pagesize = pagesize
      this.getDirectoryObj()
    },
    handleCurrentChange (page) {
      this.queryParameter.page = page
      this.getDirectoryObj()
    }
  }
}
</script>

<style scoped lang='less'>

</style>
